<template>
	<div id="ManagerNotice">
		<div class="Announce">

			<el-button @click="announce" type="primary" class="button-add" plain>发布系统公告</el-button>
		</div>
		<div class="showNotice">
			<div class = "hiddenScroll">
				<div v-for="n in notice" :key="n.id" class="notice-div">
					<div class="flex1">
						<div class="notice-title">
							<span class="title">{{n.title}} </span>
							<span class="author">{{n.m_name}}</span>
				
							<span class="time">{{n.time | time}}</span>
						</div>
						<div class="notice-content">{{n.content}}</div>
					</div>
					<div class="flex2">
						<el-button @click="deleteNotice(n.id)" class="deletebutton" type="warning">删除</el-button>
					</div>
				</div>
			</div>
			
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				notice: '',
				time: '',
				level: ''
			}
		},
		filters: {
			time: function(val) {
				let t = new Date(val);
				let time = `${t.getFullYear()}年${t.getMonth()+1}月${t.getDate()}日 ${t.getHours()}:${t.getMinutes()}`
				return time;
			}
		},

		created() {

			this.getAllNotice();
		},
		methods: {
			announce() {
				this.$router.push({
					name: 'announce',

				})
			},
			getAllNotice() {
				this.$axios.get('/api/notice/queryAllNotice')
					.then(data => {

						if (data.status == 200) {

							this.notice = data.data;
							this.notice.reverse();

						}
					})
					.catch(err => {
						console.log(err)
					})
			},
			deleteNotice(id) {
				this.$axios.get('/api/notice/deleteNotice', {
						params: {
							id: id
						}
					})
					.then(data => {
						if (data.data == 'ok') {
							this.getAllNotice();
						}
					})
					.catch(err => {
						console.log(err);
					})
			}

		}
	}
</script>

<style lang='less' scoped>
	.element::-webkit-scrollbar { width: 0 !important }
	.element { overflow: -moz-scrollbars-none; }
	#ManagerNotice {
		width: 100%;
		height: 100%;
		position: relative;
		
		.Announce{
			text-align: left;
			margin-top:10px;
			margin-left:15px; 
		}
		
		.showNotice{
			
			overflow: hidden; 
			width: 100%;
			height: 100%;
			position: relative;
			
			.hiddenScroll{
				overflow-x: hidden; 
				overflow-y: scroll; 
				width: 100%;
				height: 600px;
				position: absolute;
				right: -15px;
			}

			.notice-div {
				border: 1px solid #E0ECFF;
				overflow: hidden;
				background-color: #fff;
				margin-top: 10px;
				padding: 24px 16px;
				text-align: left;
				border-radius: 4px;
				box-shadow: 0 2px 4px 0 rgba(121, 146, 185, .54);
			
				display: flex;
				display: -webkit-flex;
			
				.flex1 {
					flex: 10;
				}
			
				.flex2 {
					flex: 1;
				}
			
				.notice-title {
			
					.title {
						color: #333;
						font-weight: 700;
					}
			
					.time {
						color: #999;
						font-size: 12px;
						line-height: 22px;
						margin: 0 10px;
					}
				}
			
				.notice-content {
					word-break: break-all;
			
					padding-left: 10px;
					padding-top: 10px;
					font-size: 12px;
					margin-right: 10px;
				}
			
			}


		}
	}
</style>
